<script setup lang="ts">

import {computed, ref, watch} from "vue";

const props = defineProps(['path', 'rotation'])
const path = computed(() => props.path)
const rotation = computed(() => props.rotation)

const imgRef = ref(null)

const width = ref(0)
const height = ref(0)

const img = document.createElement("img")
let naturalWidth
let naturalHeight
img.onload = () => {
  width.value = img.naturalWidth
  height.value = img.naturalHeight
  naturalWidth = img.naturalWidth
  naturalHeight = img.naturalHeight
}
img.src = path.value

watch(rotation, () => {
  if ((rotation.value % 180)) {
    width.value = naturalHeight
    height.value = naturalWidth
  } else {
    width.value = naturalWidth
    height.value = naturalHeight
  }
})

</script>

<template>
  <div class="imgBox" :style="{width:width+'px',height:height+'px',}">
    <img ref="imgRef" :src="path" :style="{transform:`rotate(${rotation}deg)`}">
  </div>
</template>

<style scoped lang="less">
.imgBox {
  transform-origin: center;
  align-content: center;
  justify-items: center;

  img {
    display: block;
    transform-origin: center;
  }
}
</style>